<template id="addPay">
    <div class="addPay">
      <form action="" class="addPayAct" v-if="isNextStep">

       <div class="row addPayList">
         <div class="addPayInfo">
           <label for="payNumber" class="col_333 payNumberTitle">缴费编号</label>
           <input type="text"   name="payNumber" v-model="pay_number" class="payNumber" id="payNumber" placeholder="请输入您的缴费号码">
         </div>
       </div>

        <div class="row addPayList">
          <div class="addPayInfo">
            <label for="payName" class="col_333 payNameTitle">姓名</label>
            <input type="text" name="payName" class="payName" v-model="pay_name" id="payName" placeholder="请输入您的姓名">
          </div>
        </div>


        <input type="button" value="下一步" class="signedBtn-1"  @click="toApplypage">



      </form>




      <!--不存在该缴费编号，重新申请-->
      <div class="applySign" v-if="!isNextStep && BUZ">
        <form action="">
          <div class="row applyList">
            <div class="applyListInfo">
              <span class="col_333 ListInfoL">缴费编号</span>
              <span class="ListInfoR">{{apply_sign.feeId}}</span>
            </div>
          </div>

          <div class="row applyList">
            <div class="applyListInfo">
              <span class="col_333 ListInfoL">缴费人员</span>
              <span class="ListInfoR">{{apply_sign.feeUserName}}</span>
            </div>
          </div>

          <div class="row applyList">
            <div class="applyListInfo">
              <span class="col_333 ListInfoL">缴费单位</span>
              <span class="ListInfoR">{{apply_sign.cityName}}</span>
            </div>
          </div>

          <div class="row applyList">
            <div class="applyListInfo">
              <span class="col_333 ListInfoL">联系方式</span>
              <input type="number" class="contect" max="11" name="contect" id="contect" v-model="contect"  placeholder="请输入手机号码">
            </div>
          </div>

          <!--<div class="row applyList">-->
            <!--<div class="applyListInfo">-->
              <!--<span class="col_333 ListInfoL">选择机构</span>-->
              <!--<span id="trigger5"  class="row ListInfoR applyList">-->
                <!--请选择-->
                <!--<i class="icon iconfont icon-shangyiye-copy"></i>-->
              <!--</span>-->
            <!--</div>-->
          <!--</div>-->

          <div class="row applyList_jigou">
            <div class="col col_333 col-20">选择机构</div>
            <div class="col tr" id="trigger5">
              请选择
              <!--<i class="icon iconfont icon-shangyiye-copy"></i>-->
            </div>
          </div>

          <!--<mt-cell-->
            <!--title="选择机构"-->
            <!--is-link-->
            <!--value="带链接">-->
          <!--</mt-cell>-->

          <!--<div id="trigger5" class="row applyList">选择机构</div>-->

        </form>
        <input type="button" value="申请绑定"  class="signedBtn-2" @click="goApply">
      </div>






      <div class="signed" v-if="!isNextStep && !BUZ">


        <div class="row signedList">
          <div class="signedListInfo">
            <span class="col_333 ListInfoL">缴费编号</span>
            <span class="ListInfoR">{{numsigned.feeId}}</span>
          </div>
        </div>

        <div class="row signedList">
          <div class="signedListInfo">
            <span class="col_333 ListInfoL">缴费人员</span>
            <span class="ListInfoR">{{numsigned.feeUserName}}</span>
          </div>
        </div>
        <div class="row signedList">
          <div class="signedListInfo">
            <span class="col_333 ListInfoL">缴费单位</span>
            <span class="ListInfoR">{{numsigned.cropName}}</span>
          </div>
        </div>
        <div class="row signedList">
          <div class="signedListInfo">
            <span class="col_333 ListInfoL">联系方式</span>
            <span class="ListInfoR">{{numsigned.telNo}}</span>
          </div>
        </div>

        <div>
          <div v-if="numsigned.mDept.length">
            <div class="row signedList" v-for="(i, index) in numsigned.mDept" :key="i.deptId" >
              <div class="signedListInfo">
                <span class="col_333 ListInfoL">{{ index+1 | numToHan}}级机构</span>
                <span class="ListInfoR">{{i.deptName}}</span>
              </div>
            </div>
          </div>

          <div v-else>
            <div class="row signedList" >
              <div class="signedListInfo">
                <span class="col_333 ListInfoL">一级机构</span>
                <span class="ListInfoR">{{numsigned.deptName}}</span>
              </div>
            </div>
          </div>
        </div>

        <input type="button" @click="goConfirm(numsigned)" value="续约" class="signedBtn" style="background: #ff4444" v-if="numsigned.status ==0">
        <input type="button" @click="go_go_Confirm(numsigned)" value="确认" class="signedBtn" style="background: #ff4444" v-else-if="numsigned.status ==1">

        <input type="button" value="正在审核" class="signedBtn" v-else="">




      </div>




    </div>
</template>

<script>

   import Vue from 'vue'

   import { MessageBox } from 'mint-ui';
   import comJs from '../../js/common';
   import MobileSelect from 'mobile-select';

   Vue.filter( 'numToHan' , function(value) {
     return comJs.convertToChinese(value) ;
   });

    export default {
        data(){
            return {


              pay_number: '',
              pay_name: '',




              isNextStep: true,



              BUZ: false,



              //不存在该编号
              apply_sign: {},
              contect:'',
              selectId: '',

              //待审核或者续约情况
              numsigned: {}

            }
        },

        methods: {


          //点击下一步逻辑判断
          toApplypage:function () {




            if(this.validTest()){

              var that = this;
              var addOptions = {
                corpId: this.$route.query.id,
                cityName: this.$route.query.cityName,
                feeId: this.pay_number,
                feeUserName: this.pay_name,
                openAccount: sessionStorage.getItem('userId')
              };

              this.$post(this.$urlAll.add_fee_user, addOptions).then(function (response) {

                // //不存在该编号
                // if(response.status == 'BCZ'){
                //   that.$router.push({path:'/pay/applySign', query: addOptions})
                // }

                //不存在该编号
                if(response.status == 'BCZ'){


                  that.apply_sign = addOptions;
                  that.isNextStep = false;
                  that.BUZ = true;


                  that.$post(that.$urlAll.query_all_detp, {corpId: addOptions.corpId}).then(function (response) {

                    var mobileSelect5 = new MobileSelect({
                      trigger: '#trigger5',
                      title: '机构选择',
                      wheels: [
                        {data: response.t}
                      ],
                      keyMap: {
                        id:'deptId',
                        value: 'deptName',
                        childs :'mDept'
                      },
                      callback:function(indexArr, data){

                        that.selectId = data[data.length-1].deptId;
                      }
                    });
                  });
                  //that.$router.push({path:'/pay/applySign', query: addOptions})
                }

                //对不起，您已经做过签约了！  //不匹配
                if(response.status == 'YQY' || response.status == 'BPP'){
                  that.pay_number = '';
                  that.pay_name = '';
                  MessageBox('提示', response.msg);
                }

                // //等待后台复核！ //该缴费编号已经失效，点击确认重新续约
                // if(response.status == 'DSH' || response.status == 'YSX' || response.status == 'QRSQ'){
                //   that.$router.push({path:'/pay/numSigned', query: response.t});
                // }

                //等待后台复核！ //该缴费编号已经失效，//点击确认申请
                if(response.status == 'DSH' || response.status == 'YSX' || response.status == 'QRSQ'){
                  that.isNextStep = false;
                  that.BUZ = false;

                  that.numsigned = response.t;


                }

              })

            }
          },

          //点击下一步验证

          validTest: function () {
            var testForm = true;
            if(this.pay_number == ''){
              DbsAlert.show({
                title: '提示',
                text: '缴费编号不能为空'
              });
              return testForm = false;
            }
            if(this.pay_name == ''){
              DbsAlert.show({
                title: '提示',
                text: '姓名不能为空'
              });
              return testForm = false;
            }
            return testForm;
          },


          // 没有缴费编号的逻辑验证

          goApply: function () {

            if(this.validTest_1()){
              //申请绑定（添加缴费用户）
              var feeUser = {
                openAccount: sessionStorage.getItem('userId'),
                feeId: this.apply_sign.feeId,
                feeUserName: this.apply_sign.feeUserName,
                corpId: this.apply_sign.corpId,
                telNo: this.contect,
                deptId: this.selectId
              };

              var that = this;

              this.$post(this.$urlAll.apply_bind, feeUser).then(function (response) {

                let instance = that.$toast('操作成功');
                setTimeout(function () {
                  instance.close();
                  that.$router.push({path:'/pay/paySign'})
                }, 2000)
              })
            }
          },

          validTest_1: function () {
            var testForm = true;
            if(this.contect == ''){
              DbsAlert.show({
                title: '提示',
                text: '手机号不能为空'
              });
              return testForm = false;
            } else if(!(/^1[34578]\d{9}$/.test(this.contect))){
              DbsAlert.show({
                title: '提示',
                text: '手机号格式不对，请重写'
              });
              return testForm = false;
            }

            if(this.selectId == ''){
              DbsAlert.show({
                title: '提示',
                text: '机构不能为空'
              });
              return testForm = false;
            }

            return testForm;
          },

          //是否续约
          goConfirm: function (item) {
            var that = this;
            MessageBox.confirm('确定续约操作?').then(function () {

              var params = {
                feeId: item.feeId,
                corpId: item.corpId,
                openAccount: sessionStorage.getItem('userId')
              };
              that.$post(that.$urlAll.extent_contract, params).then(function (response) {

                let instance = that.$toast('续约成功');
                setTimeout(function () {
                  instance.close();
                  that.$router.push({path:'/pay/paySign'})
                }, 2000)
              })
            }, function () {
              console.log('取消了');
            });
          },

          //是否确认
          go_go_Confirm: function (item) {
            var that = this;
            MessageBox.confirm('确定签约操作?').then(function () {

              var params = {

                openAccount: sessionStorage.getItem('userId'),
                feeUserId: item.feeUserId,
                corpId: item.corpId
              };
              that.$post(that.$urlAll.bind_apply, params).then(function (response) {

                let instance = that.$toast('签约成功');
                setTimeout(function () {
                  instance.close();
                  that.$router.push({path:'/pay/paySign'})
                }, 2000)
              })
            }, function () {
              console.log('取消了');
            });
          }
        }

    }
</script>

<style scoped>
  @import "../../style/common.css";


  .applyList_jigou{
    padding: 0.12rem 0.1rem;
    background: #fff;
  }



.addPayList {
  padding-left: 0.1rem ;
  background-color: #fff;
  height:0.44rem;
}
  .addPayInfo {
    width:100%;
    border-bottom: 1px solid #eee;
  }
  .payNumberTitle,.payNameTitle {
    line-height: 0.44rem;
    display: inline-block;
    width: 0.77rem;
    font-size: 0.14rem;

  }
.payNumber,.payName{
  border: none;
}

  .signedBtn-1{
    width: 2.93rem;
    height: 0.44rem;
    border: none;
    background-color: #ff4444;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    outline: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0.94rem;
  }

  .addPayAct{
    margin-top: 0.1rem;
  }









  /*缴费签约项目*/
  #trigger5{
    color: #666;
    /*line-height: 0.44rem;*/
  }


  .applyList{
    height: 0.44rem;
    background-color: #fff;
    padding-left: 0.1rem;
  }
  .applyListInfo{
    border-bottom: 1px solid #eee;
    width: 100%;
    position: relative;
  }
  .applyList span{
    line-height: 0.44rem;
    font-size: 0.14rem;
  }
  .ListInfoR{
    padding-right: 0.1rem;
    font-size: 0.13rem;
    color: #666;
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

  }
  .contect{
    width: 1.15rem;
    height: 100%;
    border: none;
    position: absolute;
    right: 0.1rem;
    line-height: 0.44rem;
    color: #666;
    text-align: right;
  }

  .icon-sel {
    font-size: 0.35rem;
    position: absolute;
    right: 0.1rem;
    top: 50%;
    -webkit-transform: translateY(-47%);
    -moz-transform: translateY(-47%);
    -ms-transform: translateY(-47%);
    -o-transform: translateY(-47%);
    transform: translateY(-47%);
    color: #666;
  }
  .listSel{
    right: 0.35rem;
  }

  .signedBtn-2{
    width: 2.93rem;
    height: 0.44rem;
    border: none;
    background-color: #ff4444;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    outline: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0.6rem;
  }

  .waring{
    padding-left: 0.2rem;
    color: #ff4444;
  }
  .isSel{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: fixed;
    left: 0;
    top: 0;
    z-index: -101;
  }
  .selBox{
    width: 2.7rem;
    height: 3.28rem;
    background-color: #ffffff;
    z-index: -100;
    position: fixed;
    top:50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-border-radius:0.05rem;
    -moz-border-radius:0.05rem;
    border-radius:0.05rem;
    overflow: hidden;
  }
  .selBox ul{

  }
  .selBox ul li {
    padding:0 0.2rem;
    font-size: 0.14rem;
    color: #333;
    height: 0.45rem;
    line-height: 0.45rem;
    border-bottom: 1px solid #eee;
    list-style: none;
    position: relative;
  }
  .icon-weixin{
    display: inline-block;
    height: 0.3rem;
    width: 0.3rem;
    background-image: url("../../assets/image/wechat.png");
    -webkit-background-size:0.3rem;
    background-size:0.3rem;
    background-repeat: no-repeat;
    margin-top: 0.075rem;
    margin-left: 0.05rem;
  }

  .icon-bank{
    display: inline-block;
    height: 0.3rem;
    width: 0.3rem;
    background-image: url("../../assets/image/paysign3.png");
    -webkit-background-size:0.3rem;
    background-size:0.3rem;
    background-repeat: no-repeat;
    margin-top: 0.075rem;
    margin-left: 0.05rem;
  }
  .weixin{
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .radio_box{

    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  }
  .radio_box input{
    opacity: 0;
  }
  .radio_box label{
    width:15px;
    height:15px;
    position:absolute;
    top:30%;
    right: 5%;
    border:2px solid #ef4949;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    background:#fff;
    cursor:pointer;
  }

  .radio_box input:checked + label:after{
    content:'';
    width:9px;
    height:9px;
    position:absolute;
    top:3px;
    left:3px;
    background:#ef4949;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
  }

  .icon-shangyiye-copy{
    font-size: 0.3rem;
    color: #c9c9c9;
  }







  /*等待后台审核*/
  select{
    direction: rtl;
  }
  .signedList{
    height: 0.44rem;
    background-color: #fff;
    padding-left: 0.1rem;
  }
  .signedListInfo{
    border-bottom: 1px solid #eee;
    width: 100%;
    position: relative;
  }
  .signedList span{
    line-height: 0.44rem;
    font-size: 0.14rem;
  }
  .ListInfoR{
    padding-right: 0.1rem;
    font-size: 0.13rem;
    color: #666;
    position: absolute;
    right: 0px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

  }
  .signedBtn{
    width: 2.93rem;
    height: 0.44rem;
    border: none;
    background-color: #999;
    font-size: 0.16rem;
    color: #fff;
    -webkit-border-radius: 0.05rem;
    -moz-border-radius: 0.05rem;
    border-radius: 0.05rem;
    outline: none;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    margin-top: 0.6rem;
  }
</style>











<!--<template id="addPay">-->
  <!--<div class="addPay">-->
    <!--<form action="" class="addPayAct">-->

      <!--<div class="row addPayList">-->
        <!--<div class="addPayInfo">-->
          <!--<label for="payNumber" class="col_333 payNumberTitle">缴费编号</label>-->
          <!--<input type="text"  name="payNumber" v-model="pay_number" class="payNumber" id="payNumber" placeholder="请输入您的缴费号码">-->
        <!--</div>-->
      <!--</div>-->

      <!--<div class="row addPayList">-->
        <!--<div class="addPayInfo">-->
          <!--<label for="payName" class="col_333 payNameTitle">姓名</label>-->
          <!--<input type="text" name="payName" class="payName" v-model="pay_name" id="payName" placeholder="请输入您的姓名">-->
        <!--</div>-->
      <!--</div>-->






    <!--</form>-->

    <!--<input type="button" value="下一步" class="signedBtn"  @click="toApplypage">-->


  <!--</div>-->
<!--</template>-->

<!--<script>-->

  <!--import { MessageBox } from 'mint-ui';-->

  <!--export default {-->
    <!--data(){-->
      <!--return {-->
        <!--pay_number: '',-->
        <!--pay_name: ''-->
      <!--}-->
    <!--},-->

    <!--methods: {-->
      <!--toApplypage:function () {-->


        <!--if(this.validTest()){-->

          <!--var that = this;-->
          <!--var addOptions = {-->
            <!--corpId: this.$route.query.id,-->
            <!--cityName: this.$route.query.cityName,-->
            <!--feeId: this.pay_number,-->
            <!--feeUserName: this.pay_name,-->
            <!--openAccount: sessionStorage.getItem('userId')-->
          <!--};-->

          <!--this.$post(this.$urlAll.add_fee_user, addOptions).then(function (response) {-->

            <!--//不存在该编号-->
            <!--if(response.status == 'BCZ'){-->
              <!--that.$router.push({path:'/pay/applySign', query: addOptions})-->
            <!--}-->

            <!--//对不起，您已经做过签约了！  //不匹配-->
            <!--if(response.status == 'YQY' || response.status == 'BPP'){-->
              <!--MessageBox('提示', response.msg);-->
            <!--}-->

            <!--//等待后台复核！ //该缴费编号已经失效，点击确认重新续约-->
            <!--if(response.status == 'DSH' || response.status == 'YSX' || response.status == 'QRSQ'){-->
              <!--that.$router.push({path:'/pay/numSigned', query: response.t});-->
            <!--}-->



            <!--// //等待后台复核！ //该缴费编号已经失效，点击确认重新续约-->
            <!--// if(response.status == 'DSH' || response.status == 'YSX' || response.status == 'QRSQ'){                            response.status == 'DCBD'){-->
            <!--//   that.$router.push({path:'/pay/numSigned', query: response.t});-->
            <!--//-->
            <!--//   // if(!that.$store.state.numsigned.feeId){-->
            <!--//   //   that.$store.state.numsigned = response.t-->
            <!--//   // }-->
            <!--//   //-->
            <!--//   // that.$router.push({path:'/pay/numSigned'});-->
            <!--//-->
            <!--// }-->

          <!--})-->

        <!--}-->
      <!--},-->
      <!--validTest: function () {-->
        <!--var testForm = true;-->
        <!--if(this.pay_number == ''){-->
          <!--DbsAlert.show({-->
            <!--title: '提示',-->
            <!--text: '缴费编号不能为空'-->
          <!--});-->
          <!--return testForm = false;-->
        <!--}-->
        <!--if(this.pay_name == ''){-->
          <!--DbsAlert.show({-->
            <!--title: '提示',-->
            <!--text: '姓名不能为空'-->
          <!--});-->
          <!--return testForm = false;-->
        <!--}-->
        <!--return testForm;-->
      <!--}-->

    <!--}-->

  <!--}-->
<!--</script>-->

<!--<style scoped>-->
  <!--@import "../../style/common.css";-->
  <!--.addPayList {-->
    <!--padding-left: 0.1rem ;-->
    <!--background-color: #fff;-->
    <!--height:0.44rem;-->
  <!--}-->
  <!--.addPayInfo {-->
    <!--width:100%;-->
    <!--border-bottom: 1px solid #eee;-->
  <!--}-->
  <!--.payNumberTitle,.payNameTitle {-->
    <!--line-height: 0.44rem;-->
    <!--display: inline-block;-->
    <!--width: 0.77rem;-->
    <!--font-size: 0.14rem;-->

  <!--}-->
  <!--.payNumber,.payName{-->
    <!--border: none;-->
  <!--}-->

  <!--.signedBtn{-->
    <!--width: 2.93rem;-->
    <!--height: 0.44rem;-->
    <!--border: none;-->
    <!--background-color: #ff4444;-->
    <!--font-size: 0.16rem;-->
    <!--color: #fff;-->
    <!-- -webkit-border-radius: 0.05rem;-->
    <!-- -moz-border-radius: 0.05rem;-->
    <!--border-radius: 0.05rem;-->
    <!--outline: none;-->
    <!--position: absolute;-->
    <!--left: 50%;-->
    <!-- -webkit-transform: translateX(-50%);-->
    <!-- -moz-transform: translateX(-50%);-->
    <!-- -ms-transform: translateX(-50%);-->
    <!-- -o-transform: translateX(-50%);-->
    <!--transform: translateX(-50%);-->
    <!--margin-top: 0.94rem;-->
  <!--}-->

  <!--.addPayAct{-->
    <!--margin-top: 0.1rem;-->
  <!--}-->
<!--</style>-->






